<template>
  <div id="table">

    <!--      筛选商品-->
    <el-input v-model="params.query" class="input-with-select" placeholder="请输入内容">
      <el-button slot="append" icon="el-icon-search" @click="goods"></el-button>
    </el-input>
    <!--      /筛选商品-->
    <!--    添加商品-->
    <el-button class="set-user" type="primary" @click="$router.push('/goods/add')">添加商品</el-button>
    <!--    /添加商品-->

    <!--      商品列表-->
    <GoodsTable :disabled.sync="disabled"
                :params="params"
                :tableData="tableData"
                :total="total"
                @getGoodsList="getGoodsList"></GoodsTable>
    <!--      /商品列表-->
  </div>
</template>

<script>
import { getGoods } from '@/api/commodity'
import GoodsTable from '@/views/commodity/components/GoodsTable'

export default {
  name: 'goods',
  methods: {
    // 搜索商品
    goods () {
      this.getGoodsList()
    },
    // 商品列表
    async getGoodsList () {
      // 发起请求前, 无论之前的请求在什么阶段 都将其终止
      // console.log(this.$httpRequestList)
      if (this.$httpRequestList.length > 0) {
        this.$httpRequestList.forEach(item => {
          item()
          this.$httpRequestList.shift()
        })
      }
      const res = await getGoods(this.params)
      // console.log(res.data)
      this.tableData = res.data.goods
      this.total = res.data.total
      this.disabled = false
    }
  },
  data () {
    return {
      tableData: [],
      params: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      total: 1,
      disabled: false
    }
  },
  created () {
    this.getGoodsList()
  },
  components: {
    GoodsTable
  }
}
</script>

<style lang="less" scoped>
/deep/ .table-m * {
  font-size: 12px;
}

/deep/ .set-user {
  margin-left: 20px !important;
}

/deep/ .input-with-select {
  width: 405px;
}

/deep/ .table-m {
  margin: 15px 0;
}
</style>
